<template>
    <el-dialog title="新增资源" :visible.sync="dialogVisible" width="30%" lock-scroll close-on-press-escape>
            <!-- 'formInline' 为此el-form 自定义的对象  -->
            <el-form :model="formInline" ref="formInline" :rules="rules" class="demo-ruleForm" label-width="145px" label-position="right">
                <el-form-item label="功能资源名称:" prop="gnzymc">
                    <el-input v-model="formInline.gnzymc" placeholder="功能资源名称（必填）"></el-input>   <!-- v-model 存放属性-->
                </el-form-item>

                <el-form-item label="资源名称后缀:" prop="zymchz"  class="sbj">
                    <el-input v-model="formInline.zymchz" placeholder="资源名称后缀"></el-input>   <!-- v-model 存放属性-->
                </el-form-item>

                <el-form-item label="排序号:" prop="pxh" class="sbj">
                    <el-input v-model="formInline.pxh" placeholder="排序号"></el-input>   <!-- v-model 存放属性-->
                </el-form-item>

                <el-form-item label="是否微页面:" prop="sfwym" class="sbj" >
                    <el-select v-model="formInline.sfwym" placeholder="是否微页面 （必填）" @change="sfwym_change">
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="请求路径:" prop="qqlj" class="sbj" v-show="qqlj_show">
                    <el-input v-model="formInline.qqlj" placeholder="请求路径"></el-input>   <!-- v-model 存放属性-->
                </el-form-item>

                <el-form-item label="代办所属小应用标识:" prop="dbssxyybs" class="sbj">
                    <el-input v-model="formInline.dbssxyybs" placeholder="代办所属小应用标识"></el-input>   <!-- v-model 存放属性-->
                </el-form-item>

                <el-form-item label="代办类型标识:" prop="dblxbs" class="sbj">
                    <el-input v-model="formInline.dblxbs" placeholder="代办类型标识"></el-input>   <!-- v-model 存放属性-->
                </el-form-item>

                <el-form-item label="是否判断权限:" prop="sfpdqx" class="sbj" v-show="sfpdqx_show">
                    <el-select v-model="formInline.sfpdqx" placeholder="是否判断权限 （必填）">
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button type="success" @click="addYjzy()">确 定</el-button>
                <el-button type="warning" @click="close('formInline')">取 消</el-button>
            </div>
    </el-dialog>
</template>

<script>
    import {jcqxCnzyAdd} from "../../../../api/app/xtgl0301/zygl";

    export default {
        name: "addGnzyDialog",
        data() {
            return {
                dialogVisible:false,
                qqlj_show: true,
                sfpdqx_show: true,
                fcdid: '',
                formInline : {
                    gnzymc: '',
                    zymchz: '',
                    pxh: '',
                    qqlj: '',
                    sfwym: '',
                    dbssxyybs: '',
                    dblxbs: '',
                    sfpdqx: '',
                },
                rules: {
                    gnzymc : [{required: true, trigger: 'blur', message: '请输入功能资源名称'}],
                    pxh : [{required: true, trigger: 'blur', message: '请输入排序号'},
                        {pattern: /^[0-9]*$/g, message: '请输入正确的数字格式'}],
                    sfwym : [{required: true, trigger: 'blur', message: '请选择是否微页面'}],
                    qqlj : [{required: true, trigger: 'blur', message: '请输入请求路径'}],
                    sfpdqx : [{required: true, trigger: 'blur', message: '请选择是否判断权限'}],
                }
            }
        },
        methods : {
            show(){                                               //显示方法
                this.dialogVisible = true
            },
            hidden(){                                             //隐藏方法
                this.dialogVisible = false
            },
            sfwym_change(val) {
                if (val != 1) {
                    this.qqlj_show = false
                    this.sfpdqx_show = false
                    this.formInline.qqlj = ''
                    this.formInline.sfpdqx = ''
                    this.rules = {
                        gnzymc : [{required: true, trigger: 'blur', message: '请输入功能资源名称'}],
                        pxh : [{required: true, trigger: 'blur', message: '请输入排序号'},
                            {pattern: /^[0-9]*$/g, message: '请输入正确的数字格式'}],
                        sfwym : [{required: true, trigger: 'blur', message: '请选择是否微页面'}],
                    }
                } else {
                    this.qqlj_show = true
                    this.sfpdqx_show = true

                    this.rules = {
                        gnzymc : [{required: true, trigger: 'blur', message: '请输入功能资源名称'}],
                        pxh : [{required: true, trigger: 'blur', message: '请输入排序号'},
                            {pattern: /^[0-9]*$/g, message: '请输入正确的数字格式'}],
                        sfwym : [{required: true, trigger: 'blur', message: '请选择是否微页面'}],
                        qqlj : [{required: true, trigger: 'blur', message: '请输入请求路径'}],
                        sfpdqx : [{required: true, trigger: 'blur', message: '请选择是否判断权限'}],
                    }
                }
            },
            addYjzy() {
                this.$refs['formInline'].validate(async (valid) => {
                    if (valid) {
                        let params = {
                            fcdid : this.fcdid,
                            gnzymc : this.formInline.gnzymc,
                            zymchz : this.formInline.zymchz,
                            qqlj : this.formInline.qqlj,
                            pxh : this.formInline.pxh,
                            sfwym : this.formInline.sfwym,
                            dbssxyybs : this.formInline.dbssxyybs,
                            dblxbs : this.formInline.dblxbs,
                            sfpdqx: this.formInline.sfpdqx
                        }

                        let result = await jcqxCnzyAdd(params);

                        if (result.code != "200") {
                            this.$notify({
                                title: '失败',
                                type: 'danger',
                                message: '新增资源失败，失败原因：' + result.data.message,
                                dangerouslyUseHTMLString: true
                            });
                        } else {
                            this.$notify({
                                title: '成功',
                                type: 'success',
                                message: '新增资源成功',
                                dangerouslyUseHTMLString: true
                            });
                            this.close('formInline')
                            this.$emit('findListGnzy')
                        }
                    } else {
                        return false;
                    }
                });
            },
            close(formName) {
                this.$refs[formName].clearValidate()
                this.$refs[formName].resetFields()
                this.dialogVisible = false
            },
        }
    }
</script>

<style scoped>
    @import "../../../../styles/app0301.scss";
    .sbj {
        margin-top: 15px;
    }

    .el-input,.el-select {
        width:100%!important;
    }
</style>